<!-- 企业信息管理 -->
<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="containerMain">
        <div class="detail-container">
          <div class="detail-tab">
            <div class="tab-container">
              <el-form
                ref="formName"
                style="width:78%;color: #333;font-size: 14px;"
                :rules="rules"
                :model="infoForm"
                label-width="160px"
              >
                <el-form-item label="企业编号" prop="entNum">
                  <div class="infoFormSty">
                    <el-input
                      size="small"
                      placeholder="请输入企业编号"
                      style="width: 46%"
                      v-model="infoForm.entNum"
                      maxlength="32"
                      @keyup.native="
                        infoForm.entNum = infoForm.entNum.replace(/\D/g, '')
                      "
                      :disabled="updateDis"
                    ></el-input>
                    <span>1-32位纯数字组成</span>
                  </div>
                </el-form-item>
                <el-form-item label="企业名称" prop="entName">
                  <div class="infoFormSty">
                    <el-input
                      size="small"
                      style="width: 46%"
                      placeholder="请输入企业名称"
                      maxlength="32"
                      v-model="infoForm.entName"
                    ></el-input>
                    <span
                      >4-50位字符，可由数字、字母或字符组成，字母区分大小写</span
                    >
                  </div> </el-form-item
                >
                <el-form-item label="entSecret" prop="entName" v-show="!showBtn">
                  <div class="infoFormSty">
                    <span>{{ infoForm.entSecret }}</span>
                  </div> </el-form-item
                >



                  <el-form-item label="默认分辨率" prop="resolution">
                  <el-select v-model="infoForm.resolution" placeholder="请选择">
                    <el-option
                      v-for="item in resolutionList"
                      :key="item.type"
                      :label="item.resolutionRatio"
                      :value="item.type">
                    </el-option>
                  </el-select>
                  </el-form-item>


                <!--  onkeyup="value=value.replace(/[^\u4E00-\u9FA5]+/g,'')" -->
                <!-- <el-form-item label="行业" prop="industryId">
                  <el-select
                    style="width: 46%"
                    v-model="infoForm.industryId"
                    clearable
                    size="small"
                    placeholder="请选择行业"
                  >
                    <el-option
                      v-for="item in industryList"
                      :key="item.id"
                      :label="item.industryName"
                      :value="item.id"
                      >{{ item.industryName }}
                    </el-option>
                  </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="企业号码" prop="userPhone">
                  <div class="infoFormSty">
                    <el-input
                      size="small"
                      style="width: 46%"
                      placeholder="请输入企业号码"
                      v-model="infoForm.userPhone"
                      @keyup.native="
                        infoForm.entNum = infoForm.entNum.replace(/\D/g, '')
                      "
                      minlength="11"
                      maxlength="13"
                    ></el-input> -->
                    <!-- <span>11-13位纯数字组成</span> -->
                  <!-- </div>
                </el-form-item> -->
                <!-- <el-form-item label="地址">
                  <div style="display: flex">
                    <el-select
                      v-model="infoForm.provinceId"
                      @change="provinceSelect"
                      style="margin-right:10px"
                      size="small"
                      placeholder="省/直辖市"
                    >
                      <el-option
                        v-for="(item, index) in provList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        >{{ item.name }}
                      </el-option>
                    </el-select>
                    <el-select
                      v-model="infoForm.cityId"
                      @change="citySelect"
                      style="margin-right:10px"
                      size="small"
                      placeholder="市/直辖市"
                    >
                      <el-option
                        v-for="(item, index) in cityList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        >{{ item.name }}
                      </el-option>
                    </el-select>
                    <el-select
                      v-model="infoForm.countyId"
                      size="small"
                      placeholder="县"
                    >
                      <el-option
                        v-for="(item, index) in countyList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        >{{ item.name }}
                      </el-option>
                    </el-select>
                  </div> -->
                  <!-- <el-cascader
                    size="small"
                    v-model="address"
                    :options="provList"
                    @change="handleChange">
                  </el-cascader> -->
                  <!-- <el-input size="small" placeholder="详细地址" v-model="infoForm.entAddress"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="邮箱" prop="userEmail">
                  <div class="infoFormSty">
                    <el-input
                      size="small"
                      style="width: 46%"
                      placeholder="请输入邮箱地址"
                      v-model="infoForm.userEmail"
                    ></el-input>
                  </div>
                </el-form-item> -->
              </el-form>
              <div style="width:78%; margin-left:160px;">
                <el-button size="mini" type="default" @click="goBack"
                  >取消</el-button
                >
                <el-button size="mini" type="primary" @click="save" v-show="showBtn"
                  >保存</el-button
                >
                <el-button size="mini" type="primary" @click="changeInfo" v-show="!showBtn"
                  >编辑</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="openDialog"
      :visible.sync="dialogVisible"
      width="480px"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title">
        开户信息
        <el-button type="text" size="mini" @click="copyText('targetText')"
          >一键复制</el-button>
      </div>
      <div id="targetText" class="targetText">
        <span>企业编号：{{ viewEntInfo.entNum }}</span> <br />
        <span>企业名称：{{ viewEntInfo.name }}</span
        ><br />
        <span>
          机构用户：{{ viewEntInfo.username }}，密码：{{
            viewEntInfo.password
          }}</span
        ><br />
      </div>

      <span slot="footer" class="dialog-footer">
        <div style="padding: 10px 0px 20px 31px;text-align: left;line-height:30px;">
          <i class="el-icon-success" style="color:#56b333;font-size:29px;"></i>
          <span
            style="color:#000;font-size:16px;font-weight:700;vertical-align: 4px;"
            >企业创建成功，是否继续订阅服务？</span
          >
        </div>
        <el-button @click="goBack" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="goToSubscript"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import HeaderTitle from "@/components/Headertitle/index";
import {
  // getIndustryList,
  getEntInfo,
  // getAreaList,
  changeEntInfo,
  getDefaultUsersInfo,
  saveEnt,
  getVideoRatioList
} from "@/api/enterpriseinfo";
import { log } from 'util';
export default {
  data() {
    var checkEntNum = (rule, value, callback) => {
      var res = /^[0-9]*$/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("企业编号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkEntName = (rule, value, callback) => {
      var res = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,50}/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("企业名称不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    // var checkuserName = (rule, value, callback) => {
    //   var res = /^[\u4E00-\u9FA5A-Za-z]+$/;
    //   if (!value) {
    //     return callback();
    //   } else if (!res.test(value)) {
    //     return callback(new Error("客户姓名不合规格，请重新输入"));
    //   } else {
    //     return callback();
    //   }
    // };
    var checkuserPhone = (rule, value, callback) => {
      var res = /^1[3456789]\d{9}$/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("手机号码不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      var res = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("邮箱不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    return {
      showBtn: '',
      id: "",
      titleList: [{ title: "企业信息" }],
      dialogVisible: false, //新增成功后的弹框
      listLoading: true, // loading加载
      industryList: [],
      resolutionList:[],
      entName: "",
      entNum: "",
      infoForm: {
        entNum: "",
        entName: "",
        resolution:null,
        industryId: "",
        userPhone: "", // 手机号码
        userEmail: "", //邮箱
        provinceId: "",
        cityId: "",
        countyId: "",
        entAddress:'',
      },
      rulesAdd: {
        entNum: [
          { required: true, message: "请输入企业编号", trigger: "blur" },
          { validator: checkEntNum, trigger: "blur" },
          {
            min: 1,
            max: 32,
            message: "企业编号不合规，请重新输入！",
            trigger: "blur"
          }
        ],
        entName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          {
            min: 4,
            max: 32,
            message: "企业名称不合规，请重新输入！",
            trigger: "blur"
          }
        ],
        resolution:[
          { required: true, message: "请选择分辨率", trigger: "blur" },
        ],
        industryId: [
          { required: true, message: "请选择行业", trigger: "change" }
        ],

        // userName: [
        //   { validator: checkuserName, trigger: "blur" },
        //   { min: 1, max: 16, message: "长度在 0 到 16 个字符", trigger: "blur" }
        // ],
        userPhone: [
          { validator: checkuserPhone, trigger: "blur" },
          {
            min: 11,
            max: 13,
            message: "长度在 11 到 13 个字符",
            trigger: "blur"
          }
        ],
        userEmail: [{ validator: checkEmail, trigger: "blur" }]
      },
      rulesEdit: {
        entName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
          {
            min: 4,
            max: 32,
            message: "企业名称不合规，请重新输入！",
            trigger: "blur"
          }
        ],
        industryId: [
          { required: true, message: "请选择行业", trigger: "change" }
        ],

        // userName: [
        //   { validator: checkuserName, trigger: "blur" },
        //   { min: 0, max: 16, message: "长度在 0 到 16 个字符", trigger: "blur" }
        // ],
        userPhone: [
          { validator: checkuserPhone, trigger: "blur" },
          {
            min: 11,
            max: 13,
            message: "长度在 11 到 13 个字符",
            trigger: "blur"
          }
        ],
        userEmail: [{ validator: checkEmail, trigger: "blur" }]
      },
      viewEntInfo: {},
      provList: [], // 省
      cityList: [], // 市
      countyList: [], // 县
      updateDis: false // 编辑企业控件禁用
    };
  },
  computed: {
    rules: function() {
      if (this.id) {
        return this.rulesEdit;
      } else {
        return this.rulesAdd;
      }
    }
  },
  created() {
    const { id } = this.$route.params;
    this.id = id;
    // this.getIndustryList(); //行业
    if (id) {
      //编辑
      this.update(id);
      this.showBtn = false

    } else {
      //新增
      this.add();
      this.showBtn = true
    }
  },
  components: {
    HeaderTitle
  },
  mounted() {
    this.getVideoRatioList()
  },
  methods: {
    // getIndustryList() {
    //   getIndustryList().then(response => {
    //     this.industryList = response.data;
    //   });
    // },
    //返回列表页
    getVideoRatioList(){
      getVideoRatioList().then(res => {
        console.log(res,"getResolutionList")
        this.resolutionList = res.data
      })
    },
    goBack() {
      this.$router.push({
        name: "enterpriseinfo"
      });
    },

    //新增企业按钮
    add() {
      this.titleList.push({ title: "新增" });
      this.updateDis = false;
      if (this.$refs["formName"]) {
        this.$refs["formName"].resetFields();
      }
      // this.getProvince();
    },

    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    // 地址级联选择器触发事件
    handleChange(value) {
      console.log(value, "val");
    },

    //新增成功后获取企业默认账号信息
    getDefaultUsersInfo(entNum) {
      getDefaultUsersInfo({ entNum: entNum }).then(res => {
        this.viewEntInfo = res.data;
      });
    },
    //复制
    copyText(targetId) {
      var textStr = document.getElementById(targetId).innerText;
      var oInput = document.createElement("textarea");
      oInput.value = textStr;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    //跳转 服务订阅页面
    goToSubscript() {
      this.$router.push({
        name: "enterpriseinfo",
        params: { entNum: this.infoForm.entNum }
      });
    },
    //新增成功后现实的企业信息弹窗
    save() {
      this.$refs.formName.validate(valid => {
        if (valid) {
          this.$confirm("是否保存企业信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              saveEnt({ ...this.infoForm }).then(response => {
                if(response.code==0){
                    this.goBack();
                } else {
                  this.$message({
                    type: 'error',
                    message: response.msg
                  })
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeInfo() {
      this.$refs.formName.validate(valid => {
        if (valid) {
          this.$confirm("是否保存企业信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              changeEntInfo({ ...this.infoForm }).then(response => {
                if(response.code==0){
                  this.viewEntInfo = response.data.data;
                    console.log(this.viewEntInfo);
                  if (!this.infoForm.id) {
                    this.dialogVisible = true;

                  } else {
                    this.goBack();
                  }
                } else {
                  this.$message({
                    type: 'error',
                    message: response.msg
                  })
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    update(id) {
      this.titleList.push({ title: "编辑" });
      this.updateDis = true;
      if (this.$refs["formName"]) {
        this.$refs["formName"].resetFields();
      }
      getEntInfo(id).then(response => {
        this.infoForm = response.data;
        console.log(this.infoForm,"this.infoForm")
      });
    }
  }
};
</script>
<style lang="scss">
.openDialog{
  .el-dialog__body {
    padding: 0 50px 20px;
    background: #F9FAFF;
  }
  .el-dialog__header {
    padding: 21px 0px 0 50px;
    background: #F9FAFF;
  }
}
</style>
<style lang="scss" scoped>
.el-dialog__header {
  padding: 0px !important;
}
label {
  font-weight: 100;
}
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    flex: 1;
    height: 100%;
    // background: #f1f3f7;
    // padding: 20px;
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .server {
        height: 40px;
        line-height: 40px;
        color: #409eff;
        .title {
          padding-left: 20px;
        }
      }
      .searchList {
        padding: 20px 20px 20px;
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
        .search-item {
          font-size: 14px;
          color: #333;
          display: flex;
          flex-wrap: wrap;
          .item-con {
            display: flex;
            span {
              display: inline-block;
              width: 60px;
              text-align: right;
              line-height: 28px;
              margin-right: 10px;
            }
          }
          .item {
            width: 180px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .infoFormSty {
    display: flex;
    span {
      display: inline-block;
      color: #999;
      font-size: 13px;
      margin-left: 20px;
    }
  }
  .detail-header {
    display: flex;
    justify-content: space-around;
    .detail-title {
      flex: 1;
      text-align: left;
    }
    .detail-btn {
      flex: 1;
      text-align: right;
    }
  }
  .detail-container {
    margin-top: 10px;
    display: flex;
    .detail-tab {
      width: 100%;
      .tab-header {
        color: #666;
      }
      .tab-container {
        width: 100%;
        margin-top: 15px;
      }
    }
  }
}
.targetText {
  span {
    display: inline-block;
    margin-bottom: 5px;
  }
}
</style>
